// https://github.com/BenjaminAster/Better-TypeScript/blob/main/types/devtools-formatters.d.ts
// See https://docs.google.com/document/d/1FTascZXT9cxfetuPRT2eXPQKXui4nWFivUnS_335T3U/preview

export type DevtoolsFormatterObjectConfig = Record<string | symbol, any>;

type DevtoolsFormatterElementTagName = (
    | "div"
    | "span"
    | "ol"
    | "li"
    | "table"
    | "tr"
    | "td"
);

type DevtoolsFormatterElementTemplate = (
    | DevtoolsFormatterStyledElementTemplate
    | DevtoolsFormatterUnstyledElementTemplate
);

type DevtoolsFormatterStyledElementTemplate = readonly [
    DevtoolsFormatterElementTagName,
    {
        style?: string,
    },
    ...DevtoolsFormatterItem[],
];

type DevtoolsFormatterUnstyledElementTemplate = readonly [
    DevtoolsFormatterElementTagName,
    ...DevtoolsFormatterItem[],
];

type DevtoolsFormatterObjectReference = readonly [
    "object",
    {
        object: any,
        config?: DevtoolsFormatterObjectConfig,
    },
];

export type DevtoolsFormatterItem = (
    | string
    | DevtoolsFormatterElementTemplate
    | DevtoolsFormatterObjectReference
);

export interface DevtoolsFormatter {
    header(object?: any, config?: DevtoolsFormatterObjectConfig): DevtoolsFormatterItem | null;
    hasBody(object?: any, config?: DevtoolsFormatterObjectConfig): boolean;
    body(object?: any, config?: DevtoolsFormatterObjectConfig): DevtoolsFormatterItem;
}

declare global {
    interface Window { 
        devtoolsFormatters: DevtoolsFormatter[];
    }
}